<template>
  <el-dialog
    title="选择物料清单"
    :visible="importMbomDialog"
    width="70%"
    class="order-importMbom-select"
    @close="importMbomClose"
  >
    <div class="app-container order-importMaterial-box">
      <div class="layout-box">
        <el-form :inline="true" label-width="70px" class="search-top">
          <div class="search-sub">
            <el-form-item label-width="82">
              <el-input
                v-model="queryDetail.invCode"
                clearable
                size="small"
                placeholder="物料编码"
                style="width: 180px"
              />
            </el-form-item>
            <el-form-item label-width="82">
              <el-input
                v-model="queryDetail.invName"
                clearable
                size="small"
                placeholder="物料名称"
                style="width: 250px"
              />
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                icon="el-icon-search"
                @click="handleSearch"
                >搜索
              </el-button>
            </el-form-item>
          </div>
          <div>
            <el-button
              type="primary"
              plain
              icon="el-icon-menu"
              size="mini"
              @click="checkleAll"
              >查询所有</el-button
            >
          </div>
        </el-form>

        <!-- 明细列表 -->
        <el-table
          :data="detailTableData"
          border
          style="width: 100%"
          v-loading="detailLoading"
          :height="detailMaxHeight"
          ref="detailTable"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            prop="inv_code"
            label="物料编码"
            align="center"
            width="120"
          >
          </el-table-column>
          <el-table-column label="物料名称" align="center" width="250">
            <template v-slot="scope">
              <div>
                <span
                  >{{ scope.row.inv_name }} {{ scope.row.inv_attribute }}</span
                >
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="quantity"
            label="数量"
            align="center"
            width="120"
          >
            <template v-slot="scope">
              <div style="text-align: right">
                <span>{{ scope.row.quantity }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="wm_quantity"
            label="库存数量"
            align="center"
            width="120"
          >
            <template v-slot="scope">
              <div style="text-align: right">
                <span>{{ scope.row.wm_quantity }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="invInTypeCn"
            label="用料方式"
            align="center"
            width="100"
          >
          </el-table-column>
          <el-table-column
            prop="supplyTypeCn"
            label="供应方式"
            align="center"
            width="100"
          >
          </el-table-column>
          <el-table-column
            prop="need_date"
            label="需求日期"
            align="center"
            width="120"
          >
            <template v-slot="scope">
              <span
                v-if="
                  scope.row.need_date !== undefined &&
                  scope.row.need_date !== null
                "
                >{{ scope.row.need_date | inMaterTime }}</span
              >
            </template>
          </el-table-column>
          <el-table-column prop="remarks" label="备注" align="center">
          </el-table-column>
          <el-table-column type="selection" width="50" align="center">
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="ImportMaterial-success">
      <div>
        <el-button
          :disabled="successStatus"
          type="primary"
          @click="handleImportMbomSuccess"
          >确定</el-button
        >
        <el-button @click="handleClose">取消</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { listImportMbom, dictMatching } from "../../api/purchase";
//并行请求
import axios from "axios";
import { Translate } from "../../utils/plan";
export default {
  data() {
    return {
      // 已选物料
      selectData: [],
      // 明细遮罩层
      detailLoading: true,
      //明细查询参数
      queryDetail: {
        mpCode: "",
        invName: "",
        invCode: "",
      },
      //用料方式
      optionsInvInType: [],
      //供应方式
      optionsSupplyType: [],
      // 小数位数
      decimal: 2,
      // 明细总条数
      detailTotal: 0,
      // 明细最大高度
      detailMaxHeight: null,
      //物料大类数据
      sortData: [],
      //物料大类下标
      sortIndex: null,
      //明细数据
      detailTableData: [],
      successStatus: true,
      demo: {},
    };
  },
  props: {
    importMbomDialog: {
      type: Boolean,
      default: true,
    },
    mpCode: {
      type: String,
      default: "",
    },
  },
  created() {
    this.queryDetail.mpCode = this.mpCode;
    this.workTypeIndex = this.workType;
    setTimeout(() => {
      this.getDictionaryType().then(() => {
        this.getDetailList();
      });
    }, 0);
  },
  methods: {
    //查询所有明细
    checkleAll() {
      this.queryDetail = {
        invName: "",
        invCode: "",
      };
      this.workTypeIndex = null;
      this.getDetailList();
    },
    //字典数据
    getDictionaryType() {
      return new Promise((resolve) => {
        const _self = this;
        _self.loading = false;
        //并行请求
        axios
          .all([
            //供应方式
            dictMatching("inv_supply_type"),
            //子用料方式
            dictMatching("inv_in_type"),
          ])
          .then(
            axios.spread(function (resSupplyType, resInvInType) {
              if (resSupplyType.code == 200 && resInvInType.code == 200) {
                //主用料方式
                _self.optionsSupplyType = resSupplyType.data;
                //子用料方式
                _self.optionsinvInType = resInvInType.data;
                resolve();
              } else {
                _self.msgError("获取信息失败");
              }
            })
          );
      });
    },

    // 获取明细
    getDetailList() {
      this.detailLoading = true;
      listImportMbom(this.queryDetail).then((res) => {
        if (res.code == 200) {
          this.detailLoading = false;
          if (res.rows.length > 0) {
            Translate(
              res.rows,
              this.optionsSupplyType,
              "supply_type",
              "supplyTypeCn"
            ).then(() => {
              Translate(
                res.rows,
                this.optionsinvInType,
                "inv_in_type",
                "invInTypeCn"
              ).then((data) => {
                this.detailTableData = data;
                this.getDecimal();
              });
            });
          } else {
            this.detailTableData = [];
          }
          this.detailTotal = res.total;
          this.detailMaxHeight =
            `${document.documentElement.clientHeight}` - 390;
        }
      });
    },

    handleSearch() {
      this.getDetailList();
    },
    //批量选择
    handleSelectionChange(row) {
      this.selectData = [];
      if (row.length > 0) {
        this.successStatus = false;
        this.selectData = [...row];
      } else {
        this.selectData = [];
        this.successStatus = true;
      }
    },

    //格式化数量单价金额小数位数
    getDecimal() {
      if (this.detailTableData.length > 0) {
        this.detailTableData.forEach((item) => {
          if (item.price !== null && item.price !== undefined) {
            item.price = parseFloat(item.price).toFixed(this.decimal);
          }
          if (item.surplus !== null && item.surplus !== undefined) {
            item.surplus = parseFloat(item.surplus).toFixed(this.decimal);
          }
          if (item.quantity !== null && item.quantity !== undefined) {
            item.quantity = parseFloat(item.quantity).toFixed(2);
          }
          if (item.wm_quantityy !== null && item.wm_quantity !== undefined) {
            item.wm_quantity = parseFloat(item.wm_quantity).toFixed(
              this.decimal
            );
          }
          if (item.orderQuantity !== null && item.orderQuantity !== undefined) {
            item.wmQuantity = parseFloat(item.orderQuantity).toFixed(
              this.decimal
            );
          }
          if (item.wiQuantity !== null && item.wiQuantity !== undefined) {
            item.wiQuantity = parseFloat(item.wiQuantity).toFixed(this.decimal);
          }
          if (item.woQuantity !== null && item.woQuantity !== undefined) {
            item.woQuantity = parseFloat(item.woQuantity).toFixed(this.decimal);
          }
        });
      }
    },
    // 弹框状态
    importMbomClose() {
      this.$emit("importMbomClose");
    },

    //确定选取
    handleImportMbomSuccess() {
      this.$emit("handleImportMbomSuccess", this.selectData);
        this.importMbomClose();
    },

    // 关闭弹框
    handleClose() {
      this.importMbomClose();
    },
  },
  filters: {
    //时间格式化
    inMaterTime(date) {
      let time = new Date(date);
      return (
        time.getFullYear() + "-" + (time.getMonth() + 1) + "-" + time.getDate()
      );
    },

    //PP专用
    isPurpose(i) {
      switch (i) {
        case "0":
          return "否";
          break;
        case "1":
          return "是";
          break;
        default:
          return "否";
      }
    },
  },
};
</script>
<style lang="scss">
.order-importMbom-select {
  .el-dialog__body {
    height: calc(100vh - 250px);
    position: relative;
  }
  .search-top {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
  }

  .search-plan {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .plan-l {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .el-form-item {
      margin-right: 0;
      margin-left: 10px;
    }
    .el-input__inner {
      height: 28px;
      line-height: 28px;
    }
  }
  .el-pagination {
    left: 0;
  }
  .is-plan {
    background: #67c23a !important;
    border-color: #67c23a !important;
    color: #ffffff !important;
    outline: none !important;
  }
  .app-container {
    padding-top: 0;
  }

  .layout-box {
    .el-link.is-underline:hover:after {
      border: none;
    }

    .search-box {
      display: flex;
      margin-bottom: 20px;

      .search-input {
        display: flex;
        margin-right: 15px;

        .input-data {
          min-width: 220px !important;
        }

        .el-input {
          margin-right: 15px;
        }
      }
    }

    .sort-active {
      background: #1890ff !important;
      border-color: #1890ff !important;
      color: #ffffff !important;
    }

    .con-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .material-sort {
      span {
        font-size: 14px;
        padding: 0px 15px;
        background: #f4f4f5;
        color: #999;
        display: inline-block;
        border-radius: 3px;
        margin-left: 5px;
        margin-right: 5px;
        cursor: pointer;
        line-height: 26px;
        border: 1px solid #e9e9eb;
      }
    }
  }

  .ImportMaterial-success {
    position: absolute;
    bottom: 20px;
    right: 40px;

    button {
      padding: 8px 40px;
    }
  }
}
</style>
